<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="菜单名称:">
        <el-input v-model="queryParams.rightsName" maxlength="20" placeholder="请输入菜单名称" @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item label="菜单编码:">
        <el-input v-model="queryParams.rightsCode" maxlength="20" placeholder="请输入菜单编码" @keyup.enter="onSearch" />
      </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch"><el-icon><Search /></el-icon>查  询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button class="bs-form-btn" size="small" type="primary"  @click="openModal" v-permission="['system::menuAdd']"> <el-icon><Plus /></el-icon>新增 </el-button>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- Table start -->
    <div>
      <ColumnSetting v-model:columnList="columnList" />
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="rightsId"
        :border="true"
        class="bs-table"
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
        :height="tableHeight"
        table-layout='auto'
      >
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.label" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='rightsType'">
                 {{ getRightsType(scope.row.rightsType) }}
              </template>
              <template v-else-if="item.prop=='isHidden'">
                  {{ getHidden(scope.row.isHidden) }}
              </template>
              <template v-else>
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240" v-permission="['system::menuUpdate','system::menuDelete']" v-else-if="!item.hide && item.prop=='action'">
            <template #default="scope" >
              <el-button size="small" :disabled="isProjectRights(scope.row)" link type="success" @click="openUpdateModal(scope.row)" v-permission="['system::menuUpdate']"> <el-icon><Edit /></el-icon> 修改</el-button>
              <el-button size="small" :disabled="isProjectRights(scope.row)" link type="danger" @click="deleteMenu(scope.row)" v-permission="['system::menuDelete']"><el-icon><Delete /></el-icon>删除</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <!-- Table end -->
    <AddMenu ref="addMenuRef" @flushTable="menuListAll" />
    <UpdateMenu ref="updateMenuRef" @flushTable="menuListAll" />
  </div>
</template>
<script>
import { listAll, deleteRights } from '@/api/system/menu'
import AddMenu from '@/views/system/menu/addMenu.vue'
import UpdateMenu from '@/views/system/menu/updateMenu.vue'
import { mapState } from 'vuex'

export default {
  components: {
    AddMenu,
    UpdateMenu
  },
  data() {
    return {
      tableLoading: false,
      tableData: [],

      queryParams: {
        rightsName: '',
        rightsCode: ''
      },
      columnList:[
        {prop:'rightsName',label:'菜单名称',sortable:true,sort:1,hide:false,fixed:false},
        {prop:'rightsType',label:'菜单类型',sortable:false,sort:2,hide:false,fixed:false,width:130},
        {prop:'rightsCode',label:'菜单编号',sortable:false,sort:3,hide:false,fixed:false,width:170},
        {prop:'sort',label:'排序',sortable:true,sort:4,hide:false,fixed:false,width:80},
        {prop:'isHidden',label:'可见',sortable:true,sort:5,hide:false,fixed:false,width:80},
        {prop:'path',label:'组件路径',sortable:true,sort:6,hide:false,fixed:false,width:220},
        {prop:'action',label:'操作',sortable:true,sort:7,hide:false,fixed:'right'},
      ],
      tableHeight:(window.innerHeight - 360) + 'px',
    }
  },
  mounted() {
    this.menuListAll()
    this.countTableHeight()
  },
  computed:{
    ...mapState(['amplify'])
  },
  methods: {
    // 删除菜单
    deleteMenu(row) {
      this.$confirm(`确定要删除菜单" ${row.rightsName} "（如果包含子菜单，将一并删除），此操作将永久删除, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRights({ 'rightsId': row.rightsId }).then(res => {
          if (res.code === 1) {
            this.onSearch()
          }
        })
      }).catch(()=>{})
    },
    // 打开修改弹框事件
    openUpdateModal(row) {
      this.$refs.updateMenuRef.openModal(row.rightsId)
    },
    // 打开新增弹框事件
    openModal() {
      // 调用子组件中的方法打开弹框
      this.$refs.addMenuRef.openModal()
    },
    // 搜索
    onSearch() {
      this.queryParams.pageNo = 1
      this.menuListAll()
    },
    menuListAll() {
      const params = JSON.parse(JSON.stringify(this.queryParams))

      this.tableLoading = true
      listAll(params)
        .then((res) => {
          this.tableLoading = false
          if (res.code === 1) {
            this.tableData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((error) => {
          this.tableLoading = false
        })
    },
    getHidden(isHidden) {
      if (isHidden == 0) {
        return '显示'
      } else {
        return '隐藏'
      }
    },
    isProjectRights(row){
      if (row.rightsType == 3) {
        console.log('项目菜单不准许修改')
      }
        return row.rightsType == 3
    },
    getRightsType(rightsType) {
      if (rightsType == 0) {
        return '目录'
      } else if (rightsType == 1) {
        return '菜单'
      } else if (rightsType == 2) {
        return '按钮'
      } else if (rightsType == 3) {
        return '项目菜单'
      } else {
        return ''
      }
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      //if (column['label'] === '菜单名称') {
      if (columnIndex == 0) {
        return { textAlign: 'left', paddingLeft: '10px' }
      }
      return { textAlign: 'center' }
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      //return { textAlign: column['label'] === '菜单名称' ? 'left' : 'center' }
      return { textAlign:columnIndex==0? 'left' : 'center' }
    },
     // 表格高度
		countTableHeight(){
			let tableHeight = (window.innerHeight - 360) + 'px'
			// 计算搜索区域
			var searchContainerList =  document.getElementsByClassName("searchContainer")
			if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
          let searchContainerHeight = searchContainerList[0].offsetHeight
          // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
          let staticHeight = 60+38+30+10
          if (this.amplify == true) {
              // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
              tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
          } else {
              tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
          }
          this.tableHeight = tableHeight
      }
      console.log("表格高度=",this.tableHeight);
		},
  },
  watch: {
		amplify(newValue,oldValue) {
			this.countTableHeight()
		}
	},
}
</script>

<style scoped>
.iconFont {
  font-size: 14px;
  color: #999;
}

.b-tag {
  display: inline-block;
  margin: 0.2rem;
  padding: 0px 15px;
  font-size: 12px;
  border: 1px solid #e8eaec;
  border-radius: 4px;
}

.b-tag-catalog {
  color: #722ed1;
  background: #f9f0ff;
  border-color: #d3adf7;
}

.b-tag-menu {
  color: #2f54eb;
  background: #f0f5ff;
  border-color: #adc6ff;
}

.b-tag-button {
  color: #52c41a;
  background: #f6ffed;
  border-color: #b7eb8f;
}

.b-tag-button2 {
  display: inline-block;
  margin: 0.2rem;
  padding: 0px 15px;
  font-size: 12px;
  color: #1890ff;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
}
/* table表格内容样式居中(列宽不够时,所有列居左展示) */
/deep/.el-scrollbar__wrap,/deep/ .el-scrollbar__wrap--hidden-default {
  text-align: left;
}
</style>